<!--
*@Author: QWP
*@Description: 请假，离蓉，加班的卡片入口
*@Date: 2024-07-30 20:22:46
-->
<template>
  <u-card class="f-h-100 u-work-applicant-card">
    <a-list :grid="{ gutter: [16, 16], column: 2 }" 
      :data-source="cardData"
      class="f-h-100">
      <template #renderItem="{ item }">
        <a-list-item style="height: 100%; padding: 0">
          <a-row align="middle">
            <div :style="{ background: item.bgColor }"
              class="u-icon-box">
              <u-icon-font :type="item.icon" style="color: #fff"></u-icon-font>
            </div>
            <a-space direction="vertical" class="f-margin-l8">
              <span class="u-span-label f-font-family">{{item.label}}</span>
              <span class="u-span-desc f-font-family">{{item.desc}}</span>
            </a-space>
          </a-row>
        </a-list-item>
      </template>
    </a-list>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'

const cardData = reactive([
  { label: '请假申请', desc: '发起各类请假、调休申请表', icon: 'icon-qingjia', bgColor: '#1890FF'},
  { label: '加班申请', desc: '快速填报加班申请表', icon: 'icon-jiaban', bgColor: '#52C41A '},
  { label: '离蓉申请', desc: '需要外出离蓉申请表', icon: 'icon-jiaban', bgColor: '#FA8C16'},
])

</script>

<style lang='scss' scoped>
.u-work-applicant-card{
  :deep(.ant-card-body) {
    height: 100%
  }
  :deep(.ant-spin-nested-loading) {
    height: 100%
  }
  :deep(.ant-spin-container) {
    height: 100%;
    &:first-child {
      .ant-row {
        height: 100%;
        .ant-col {
          height: 100%
        }
      }
    }
  }
}
.u-icon-box {
  height: 40px; 
  width: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 8px
}
.u-span-label {
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #333333;
}
.u-span-desc {
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}
</style>